<template>
   <div>

        <!-- 头部区域 -->
        <div style="height: 60px; line-height: 60px; background-color: white; margin-bottom: 2px">

          <div style="width: 300px">  
            <img src="@/assets/logo.png" alt="" style="width: 40px; position: relative; top: 10px; left: 20px">
            <span style="margin-left: 25px; font-size: 24px">专业书籍借阅系统</span>
          </div>

          <div style="flex: 1; text-align: right; padding-right: 20px">
            <el-dropdown size="medium">
              <span class="el-dropdown-link" style="cursor: pointer">
            {{ admin.username }}<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown" style="margin-top: -5px">
                <el-dropdown-item><div style="width: 50px; text-align: center;" @click="logout">退出</div></el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>

        </div>

        <!-- 侧边栏和主体 -->
        <div style="display: flex">

          <!-- 侧边栏导航 -->
          <div style="width: 200px; min-height: calc(100vh - 62px); overflow: hidden; margin-right: 2px; background-color: white">
            <el-menu :default-active="$route.path" router class="el-menu-demo" style="margin-bottom: 10px">
              
              <el-menu-item index="/" v-if="admin.role=='1' || admin.role=='2'">
                <i class="el-icon-eleme"></i>
                <span>首页</span>
              </el-menu-item>
              
              <el-submenu index="user" v-if="admin.role=='1'||admin.role == '2'">
                <template slot="title">
                  <i class="el-icon-user"></i>
                  <span>会员管理</span>
                </template>
                <el-menu-item index="/addUser">会员添加</el-menu-item>
                <el-menu-item index="/userList">会员列表</el-menu-item>
              </el-submenu>
            
              <el-submenu index="admin" v-if="admin.role=='2'">
                <template slot="title">
                  <i class="el-icon-user-solid"></i>
                  <span>管理员管理</span>
                </template>
                <el-menu-item index="/addAdmin">管理员添加</el-menu-item>
                <el-menu-item index="/adminList">管理员列表</el-menu-item>
              </el-submenu>

              <el-submenu index="category" v-if="admin.role =='0'||admin.role == '1'||admin.role == '2'">
                <template slot="title">
                  <i class="el-icon-document"></i>
                  <span>图书分类管理</span>
                </template>
                <el-menu-item index="/addCategory" v-if="admin.role =='1'||admin.role == '2'">图书分类添加</el-menu-item>
                <el-menu-item index="/categoryList" v-if="admin.role =='1'||admin.role == '2'">图书分类列表</el-menu-item>
                <el-menu-item index="/userCategoryList" v-if="admin.role =='0'">图书分类列表(用户)</el-menu-item>
              </el-submenu>

              <el-submenu index="book" v-if="admin.role =='0'||admin.role == '1'||admin.role == '2'">
                <template slot="title">
                  <i class="el-icon-s-order"></i>
                  <span>图书管理</span>
                </template>
                <el-menu-item index="/addBook" v-if="admin.role =='1'||admin.role == '2'">图书添加</el-menu-item>
                <el-menu-item index="/bookList" v-if="admin.role =='1'||admin.role == '2'">图书列表</el-menu-item>
                <el-menu-item index="/userBookList" v-if="admin.role =='0'">图书列表(用户)</el-menu-item>
              </el-submenu>

              <el-submenu index="borrow" v-if="admin.role =='0'||admin.role == '1'||admin.role == '2'">
                <template slot="title">
                  <i class="el-icon-s-platform"></i>
                  <span>借书管理</span>
                </template>
                <el-menu-item index="/addBorrow" v-if="admin.role =='1'||admin.role == '2'">借书添加</el-menu-item>
                <el-menu-item index="/borrowList" v-if="admin.role =='1'||admin.role == '2'">借书列表</el-menu-item>
                <el-menu-item index="/userBorrowList" v-if="admin.role =='0'">借书列表(用户)</el-menu-item>
              </el-submenu>

              <el-submenu>
                <template slot="title" v-if="admin.role =='0'||admin.role == '1'||admin.role == '2'">
                  <i class="el-icon-folder-opened"></i>
                  <span>还书管理</span>
                </template>
                <el-menu-item index="/returnList" v-if="admin.role =='1'||admin.role == '2'">还书列表</el-menu-item>
                <el-menu-item index="/userReturnList" v-if="admin.role =='0'">还书列表(用户)</el-menu-item>
              </el-submenu>
            
            <el-submenu index="message">
                <template slot="title">
                  <i class="el-icon-user"></i>
                  <span>消息留言</span>
                </template>
                           <el-menu-item index="/addMessage">填写留言</el-menu-item>
                           <el-menu-item index="/message" v-if="admin.role =='1'||admin.role == '2'">受理留言</el-menu-item>
                           <el-menu-item index="/userMessage" v-if="admin.role =='0'">用户留言</el-menu-item>
              </el-submenu>
            </el-menu>
          </div>

          <!-- 主体数据 -->
            <div style="flex: 1; background-color: white; padding: 10px">
              <router-view/>
            </div>

        </div>      

   </div>
</template>

<script>
import Cookies from 'js-cookie'

  export default{
    name: "Layout",
    data() {
      return {
        admin: Cookies.get('admin') ? JSON.parse(Cookies.get('admin')) : {}
      }
    },
    methods: {
      logout() {
        //清除浏览器用户数据
        Cookies.remove('admin')
        this.$router.push('/login')
      }
    }
  }
</script>

<style scoped>
</style>